<template>
    <div>
        <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" title="Edit Item" :id="itemID" @submit="confirmSubmit"
                    action="edit" :height="600"></ItemDetail>
        <modal id="chat-calendar" :show.sync="showCalendarModal" :dialogCSS="{'width': '70%'}">
            <template slot="header">
                {{  related && related.room.length ? related.room[0].physical_room_id : ''}}
            </template>
            <template slot="body">
                <full-calendar :events="events"></full-calendar>
            </template>
            <template slot="footer">
                <div></div>
            </template>
        </modal>

        <h2 class="pid-title">PID: {{related.room[0].physical_room_id}}</h2>
        <img class="room-img" v-if="msg.roomImg" :src="msg.roomImg" alt="">
        <img class="room-img" v-else src="../../../static/img/img1.jpg" alt="">
        <div class="room-title-wrapper">
            <div class="room-title-left">
                <a v-if="msg.link" :href="msg.link" target="_blank" class="room-title" style="text-decoration: underline;">
                    {{msg.title}}
                </a>
                <h3 v-else class="room-title" style="min-height: 20px;">
                    {{msg.title}}
                </h3>

                <p class="room-location">
                    <a  target="_blank" :href="'https://www.google.com/maps/search/?api=1&query=' + related.room[0].location">Location: {{related.room[0].location}}</a>
                </p>
            </div>
            <div class="room-title-right">
                <img v-if="msg.userImg" :src="msg.userImg" alt="">
                <img v-else src="../../../static/img/unkonwn.png" alt="">
            </div>
        </div>
        <div class="info-wrapper">
            <div class="info-top">
                <div class="info-item">
                    <p class="key">STATUS</p>
                    <div class="val">
                        {{related && related.order &&related.order.length ? related.order[0].status : ''}}
                    </div>
                </div>
                <div class="info-item">
                    <p class="key">PLATFORM</p>
                    <div class="val">
                        {{related && related.order.length ? related.order[0].platform : ''}}
                    </div>
                </div>
                <div class="btn-wrapper">
                    <i class="fif fif-calendar text-info" style="font-size: 24px;margin-right: 5px;cursor: pointer;"
                       @click="toShowCalendarModal"
                    ></i>
                    <button type="button" class="btn btn-warning  btn-circle btn-md m-r-5"
                            v-tooltip.top="'订单'"
                            @click="toShowOrder"
                    >
                        <i class="fif fif-cny"></i>
                    </button>
                    <button type="button" class="btn btn-info btn-circle btn-md m-r-5"
                            v-tooltip.top="'房源'"
                            @click="toShowRoom"
                    >
                        <i class="fif fif-home"></i>
                    </button>
                </div>
            </div>
            <div class="info-bottom">
                <div class="info-item">
                    <p class="key">CHECK IN</p>
                    <div class="val">
                        {{related && related.order.length ? related.order[0].checkin : ''}}
                    </div>
                    <div class="check-time">
                        {{related && related.order.length ? related.order[0].checkin_time : ''}}
                    </div>
                </div>
                <div class="info-item">
                    <p class="key">CHECK OUT</p>
                    <div class="val">
                        {{related && related.order.length ? related.order[0].checkout : ''}}
                    </div>
                    <div class="check-time">
                        {{related && related.order.length ? related.order[0].checkout_time : ''}}
                    </div>
                </div>
                <div class="info-item">
                    <p class="key">NIGHTS</p>
                    <div class="val">
                        {{related && related.order.length ? _getNights(related.order[0]) : ''}}
                    </div>
                </div>
                <div class="info-item">
                    <p class="key">GUEST</p>
                    <div class="val">
                        {{related && related.order.length ? related.order[0].guest_num : ''}}
                    </div>
                </div>
            </div>
        </div>
        <div class="note order-note-wrapper" style="margin-top: 6px; border-bottom :1px solid #f2f3f4;padding-bottom: 10px;">
            <div class="note-top" style="padding: 4px;background-color: #427ab2;color: #fff;">
                Order Note
            </div>
            <div style="padding: 4px;display: flex;font-weight: bold;">
                <div>
                    <div>
                        <span>Cleaner: </span>
                        <span>
                                          {{related && related.room.length ? related.room[0].cleaner : ''}}
                                    </span>
                    </div>
                    <div>
                        <span>Price Reference: </span>
                        <span>
                                          {{related && related.room.length ? related.room[0].ical_value : ''}}
                                    </span>
                    </div>
                </div>
                <div style="flex: 1;margin-left: 10px;text-align: right;">
                    {{related && related.order.length ? related.order[0].comment : ''}}

                </div>
            </div>
        </div>
        <div style="margin-top: 6px; border-bottom :1px solid #f2f3f4;">
            <div class="note-top" style="padding: 4px;background-color: #427ab2;color: #fff;">
                Room Note
            </div>
            <div style="padding: 4px; color: #000;font-weight: bold;">
                <ul v-if="related && related.comment">
                    <li v-for="comment in _getComments(related.comment).split('\r\n')" v-if="comment.trim().length">
                        {{comment}}
                    </li>
                </ul>
                <ul v-else></ul>
            </div>
        </div>
    </div>

</template>

<script>
    import {getRoomEvents} from '@/api/event'
    import columns from '@/config/columns'
    import Modal from '@/components/widgets/Modal'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import {itemMixin} from '@/mixins/item'
    import fullCalendar from '@/components/widgets/RoomCalendar/RoomCalendar'

    export default {
        name: "RelatedMessage",
        components: {ItemDetail, Modal, fullCalendar},
        mixins: [itemMixin],
        props: {
            related: {
                type: Object,
                default: () => {}
            },
            msg: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                showModal: false,
                showCalendarModal: false,
                events: [],
            }
        },
        methods: {
            _getNights(order) {
                return moment(order.checkout).diff(moment(order.checkin), 'days')
            },
            _getComments(data) {
                let comment = ''
                for (let key in data) {
                    return comment = data[key]
                }

            },
            toShowOrder() {
                if (this.related && this.related.order && this.related.order.length) {
                    this.model = 'Order'
                    this.item = []
                    this.defaultColumns = columns[this.model]
                    this.editItem({item: {id: this.related.order[0].id}})
                    this.showModal = true
                }

            },
            toShowRoom() {
                if (this.related && this.related.room.length) {
                    this.model = 'PhysicalRoom'
                    this.defaultColumns = columns[this.model]
                    this.item = []
                    this.editItem({item: {id: this.related.room[0].id}})
                    this.showModal = true
                }
            },
            toShowCalendarModal() {
                if (this.related && this.related.room.length) {
                    this.showCalendarModal = true
                    this._getRoomCalendar(this.related.room[0].physical_room_id)
                }
            },
            _getRoomCalendar(id) {
                this.events = []
                getRoomEvents(id, 'only', id).then((response) => {
                    let evt = response.data.events
                    this.events = []
                    for (let i = 0; i < evt.length; i++) {
                        let css = 'bg-info'
                        let start = evt[i].start
                        let end = evt[i].end
                        if (this.related.order && this.related.order.length > 0) {
                            this.currentMonth = moment(this.related.order[0].checkin)
                            for (let j = 0; j < this.related.order.length; j++) {
                                if (this.related.order[j].logical_room_id === evt[i].logical_room_id &&
                                    this.related.order[j].checkin === start &&
                                    this.related.order[j].checkout === end
                                ) {
                                    css = 'bg-danger'
                                    break
                                }
                            }
                        }
                        this.events.push({
                            start: start,
                            end: end,
                            title: evt[i].title,
                            cssClass: css
                        })
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>